<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>example for L.Measurable</title>
    <link href="//cdn.bootcss.com/leaflet/1.9.0/leaflet.css" rel="stylesheet">
    <link rel="stylesheet" href="../Leaflet.Measurable.css">
    
    <style>
        body { margin:0; padding:0; }
        #map { position:absolute; top:0; bottom:0; width:100%; }
    </style>
</head>
<body>
    <div id="map"></div>
    <script src="//cdn.bootcss.com/leaflet/1.9.0/leaflet-src.js"></script>
    <script src="//cdn.bootcss.com/leaflet-editable/1.2.0/Leaflet.Editable.js"></script>
    <script src="../Leaflet.Measurable.js"></script>
    <script>
        var map = L.map('map', {editable: true}).setView([22.5365321328,113.9173539538], 13);
        L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        }).addTo(map);

        map.addControl(new L.MeasureControl());
        document.getElementsByClassName('leaflet-measure-toggle')[0].innerHTML= "Measure";

    </script>
</body>
</html>
